<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>24期微金所项目</title>
    <meta name="discription" content="微金所是全球最大的金融机构" />
    <meta name="keywords" content="金融、股票、微商、投资" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link
      rel="stylesheet"
      href="./lib/bootstrap-3.4.1-dist/css/bootstrap.css"
    />
    <link rel="stylesheet" href="./css/style.css" />
    <script src="./lib/jQuery/jquery-3.4.1.js"></script>
    <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <script src="./js/script.js"></script>
  </head>
  <body>
    <!-- 一、顶部 -->
    <section id="topBox" class="hidden-xs">
      <div class="container">
        <div class="row">
          <div class="col-md-2 text-center">
            <a href="#">
              <span class="glyphicon glyphicon-home"></span>
              <span>手机微金所</span>
              <span class="glyphicon glyphicon-chevron-down"></span>
            </a>
          </div>
          <div class="col-md-5 text-center">
            <a href="#">
              <span class="glyphicon glyphicon-headphones"></span>
              <span>4006-89-4006（服务时间：9:00-21:00）</span>
            </a>
          </div>
          <div class="col-md-2 text-center">
            <a href="#">常见问题</a>
            <a href="#">解决问题</a>
          </div>
          <div class="col-md-3 text-center">
            <button type="button" class="btn btn-primary btn-sm">
              免费注册
            </button>
            <a href="#" data-toggle="modal" data-target="#myModal">登录</a>
          </div>
        </div>
      </div>
    </section>
    <!-- 二、头部 -->
    <header>
      <div class="container">
        <nav class="navbar navbar-default" role="navigation">
          <div class="container-fluid">
            <div class="navbar-header">
              <button
                type="button"
                class="navbar-toggle"
                data-toggle="collapse"
                data-target="#example-navbar-collapse"
              >
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">
                <img src="./images/logoweijinsuo.png" alt="" />
              </a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
              <ul class="nav navbar-nav" id="headerNav">
                <li class="active"><a href="#">我要投资</a></li>
                <li><a href="#">我要借款</a></li>
                <li><a href="#">平台介绍</a></li>
                <li><a href="#">新手专区</a></li>
                <li><a href="#">最新动态</a></li>
                <li><a href="#">微论坛</a></li>
              </ul>
              <ul class="nav navbar-nav pull-right hidden-xs">
                <li><a href="#">个人中心</a></li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </header>
    <!-- 三、轮播图 -->
    <section id="swiper">
      <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
          <div class="item active">
            <img
              src=""
              alt="First slide"
              data-lg="./images/01da.jpg"
              data-xs="./images/01xiao.jpg"
            />
          </div>
          <div class="item">
            <img
              src=""
              alt="Second slide"
              data-lg="./images/02da.jpg"
              data-xs="./images/02xiao.jpg"
            />
          </div>
          <div class="item">
            <img
              src=""
              alt="Third slide"
              data-lg="./images/03da.jpg"
              data-xs="./images/03xiao.jpg"
            />
          </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a
          class="left carousel-control"
          href="#myCarousel"
          role="button"
          data-slide="prev"
        >
          <span
            class="glyphicon glyphicon-chevron-left"
            aria-hidden="true"
          ></span>
          <span class="sr-only">Previous</span>
        </a>
        <a
          class="right carousel-control"
          href="#myCarousel"
          role="button"
          data-slide="next"
        >
          <span
            class="glyphicon glyphicon-chevron-right"
            aria-hidden="true"
          ></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </section>
    <!-- 四、支付交易保证 -->
    <section id="pay">
      <div class="container">
        <div class="row"></div>
      </div>
    </section>
    <!-- 五、预约投标 -->
    <section id="tender">
      <div class="container">
        <div class="row">
          <p class="pull-left">
            <img src="./images/clock.png" alt="" />
            <span>
              现在有<span class="redNum">458</span
              >人在排队，累计预约交易成功<span class="redNum">7409</span>次。
              什么是预约投标？
              <span class="redNum dashed">立即预约</span>
            </span>
          </p>
          <a href="#" class="pull-right hidden-xs">
            <img src="./images/carmare.png" alt="" />
            <span>微金所企业宣传片</span>
          </a>
        </div>
      </div>
    </section>
    <!-- 六、tab切换1 -->
    <section id="tab1">
      <div class="container">
        <ul id="myTab" class="nav nav-tabs">
          <li class="active">
            <a href="#p1" data-toggle="tab">特别推荐</a>
          </li>
          <li><a href="#p2" data-toggle="tab">微投资</a></li>
          <li><a href="#p3" data-toggle="tab">微小包</a></li>
          <li><a href="#p4" data-toggle="tab">微消费</a></li>
          <li><a href="#p5" data-toggle="tab">微增利</a></li>
          <li><a href="#p6" data-toggle="tab">微金宝</a></li>
          <li><a href="#p7" data-toggle="tab">微转让</a></li>
          <li class="pull-right"><a href="#p8" data-toggle="tab">更多</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
          <div class="tab-pane fade in active" id="p1">
            <div class="container">
              <div class="row"></div>
            </div>
          </div>
          <div class="tab-pane fade" id="p2">
            <div class="container">
              <div class="row"></div>
            </div>
          </div>
          <div class="tab-pane fade" id="p3">
            <div class="container">
              <div class="row"></div>
            </div>
          </div>
          <div class="tab-pane fade" id="p4">
            <div class="container">
              <div class="row"></div>
            </div>
          </div>
          <div class="tab-pane fade" id="p5">
            <div class="container">
              <div class="row"></div>
            </div>
          </div>
          <div class="tab-pane fade" id="p6">
            <div class="container">
              <div class="row"></div>
            </div>
          </div>
          <div class="tab-pane fade" id="p7">
            <div class="container">
              <div class="row"></div>
            </div>
          </div>
          <div class="tab-pane fade" id="p8">
            <div class="container">
              <div class="row"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 七、tab切换2 -->
    <section id="tab2">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-md-2 col-md-offset-2">
            <div class="newsTitle">全部新闻</div>
          </div>
          <div class="col-xs-12 col-md-1">
            <ul id="myTab_2" class="nav nav-pills">
              <li class="active">
                <a href="#news1" data-toggle="tab" data-title="全部新闻">
                  <img src="./images/eara.png" alt="" />
                </a>
              </li>
              <li>
                <a href="#news2" data-toggle="tab"  data-title="世界杯">
                  <img src="./images/news.png" alt="" />
                </a>
              </li>
              <li>
                <a href="#news3" data-toggle="tab"  data-title="奥运会">
                  <img src="./images/computer.png" alt="" />
                </a>
              </li>
              <li>
                <a href="#news4" data-toggle="tab"  data-title="中国队">
                  <img src="./images/qq2.png" alt="" />
                </a>
              </li>
            </ul>
          </div>
          <div class="col-xs-12 col-md-7">

            <div id="myTab_2" class="tab-content">
              <div class="tab-pane fade in active" id="news1">
                  <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
              </div>
              <div class="tab-pane fade in" id="news2">
                  <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
              </div>
              <div class="tab-pane fade in" id="news3">
                  <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
              </div>
              <div class="tab-pane fade in" id="news4">
                  <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
              </div>
            </div>
        </div>
      </div>
    </section>
    <!-- 八、合作伙伴 -->
    <footer></footer>
    <!-- 九、登录模态框 -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">登录</h4>
          </div>
          <div class="modal-body">
            <form role="form">
              <div class="form-group">
                <label for="email">Email address</label>
                <input
                  type="text"
                  class="form-control"
                  id="email"
                  placeholder="请输入邮箱"
                />
              </div>
              <div class="form-group">
                <label for="pwd">Password</label>
                <input
                  type="password"
                  class="form-control"
                  id="pwd"
                  placeholder="请输入密码"
                />
              </div>
              <div class="checkbox">
                <label> <input type="checkbox" />记住密码 </label>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button type="button" class="btn btn-primary">提交更改</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>
  </body>
</html>
